---
{
	"title": "Optimiser votre code JavaScript, CSS et HTML",
	"language": "fr",
	"description": "Comment optimiser votre code JavaScript, CSS et HTML",
	"altLangPrefix": "opt",
	"dateModified": "2014-07-24"
}
---

<span class="wet-boew-prettify all-pre"></span>
<p>Comment optimiser votre code JavaScript, CSS et HTML. Veuillez ajouter et apporter des améliorations aux techniques qui sont déjà énumérées.</p>

<section>
	<h2>Synthèse</h2>
	<p>L'optimisation de la programmation est une tâche importante de la Boîte à outils de l'expérience Web maintenant qu'elle adopte une approche mobilité d'abord dans la version 4.0.
	Là où la programmation molle pourrait avoir un impact minimal sur les performances dans un fureteur d'ordinateur de bureau,
	elle peut résulter en des délais vraiment significatifs sur les appareils mobiles.
	C'est pourquoi une des priorités de la BOEW v4.x est l'optimisation de la performance.</p>
	<p>Le cadre de la BOEW v4.x est déjà fortement optimisé en utilisant la minification de code, la consolidation, le scriptage CSS et l'encodage Base64.
	Tout ca résulte dans une augmentation de la performance significative mais peut encore s'enliser par du code gonflé et mou.
	Cette page fournie plusieurs conseils pour vous assurer que votre programmation est aussi efficace que possible.</p>
</section>

<section>
	<h2>Optimisation du code JavaScript</h2>
	<ul>
		<li><strong>Minimiser l'utilisation du jQuery :</strong> jQuery peut être d'un grand aide avec la traversée DOM
		et les scénarios complexes de scriptage mais peut ralentir lorsqu'on travaille avec des scénarios de code simple et direct.
		Il y a un coût a la performance pour chaque objet jQuery créé et méthode d'emballage jQuery
		pour les opérations JavaScript de base. Évitez de créer des objets jQuery chaque fois que possible,
		spécialement dans les boucles.</li>
		<li>
			<strong>Optimiser vos boucles :</strong> La boucle la plus rapide en JavaScript est en mémoire tampon pour boucles
			(longueur en mémoire tampon en dehors de la boucle). Évitez d'utiliser des boucles jQuery (p.e., <code>each()</code>)
			lorsque possible car il y a beaucoup de frais système. Dans le cas d'objets jQuery, utilisez <code>.get()</code> pour
			accéder à une collection d'objets DOM pour lesquels une condition « while » renversée et mémoire tampon pour boucles peuvent être utilisés.
			'''En mémoire tampon pour boucle (longueur en mémoire tampon en dehors de la boucle):'''
<pre><code>var i,
	len = myArray.length;
for ( i = 0; i !== len; i += 1 ) {

	// utiliser l'item de la collection
	console.log( myArray[ i ] );
}</code></pre>
		</li>
		<li><strong>« if/else » versus déclarations « switch » :</strong> Lorsque vous décidez comment contrôler le flot de votre programmation,
		il est important de considérer le nombre de conditions à comparer. Si il n'y a qu'une ou deux conditions, les déclarations « if/else » sont généralement plus rapides.
		Cependant, lorsque vous avez 3 conditions ou plus à comparer, une déclaration « switch » est l'option la plus rapide.
		Vos déclarations « if/else » et « switch » devraient aussi être organisées pour que les conditions les plus communes
		apparaissent au haut du bloc de déclaration « if/else » ou « switch » (Voir jsPerf <a rel="external" href="https://jsperf.com/program-flow-statements" lang="en">if/else versus switch test case</a>).</li>
		<li><strong>Éléments DOM en mémoire tampon, objets jQuery et valeurs objet/collection :</strong>
		Il y a beaucoup de frais système à faire des recherches DOM, créer des objets jQuery, et retrouver des valeurs objet/collection.
		Minimisez l'impact en ajoutant à la mémoire tampon les résultats où ces résultats seront utilisés plus d'une fois.
		Il est préférable d'emmagasiner ces résultats dans des variables locales et de réutiliser ces variables.</li>
		<li>
			<strong>Minimiser le refoulement :</strong> Chaque modification apportée au DOM a un coût significatif à la performance car elle
			le refoulement de page. Minimisez ce coût en effectuant tout les changements dans une seule opération
			pour actionner le refoulement qu'une seule fois plutôt que plusieurs opérations qui activent le refoulement plusieurs fois.
			Ca peut être effectuer de la manière suivante :
			<ul>
				<li>Mettre tout les changements dans une chaîne de caractères ou objet et ensuite le joindre
				au DOM ou remplacer en partie le DOM avec cette chaîne de caractères ou objet.</li>
				<li>Détachez un élément du DOM, apportez-y le changement, réattachez le ensuite au DOM.</li>
			</ul>
		</li>
		<li><strong>Éviter les recherches DOM globales :</strong> Le coût à la performance est beaucoup plus grand
		lorsqu'on recherche le DOM au complet plutôt que de rechercher seulement une partie de celui-ci.
		Si vous avez déjà une recherche en mémoire tampon, veuillez en prendre avantage et recherchez de ce point
		plutôt que de rechercher le DOM au complet à nouveau. Par exemple si vous avez déjà la recherche pour la classe <code>.button</code> en mémoire tampon
		dans la variable $buttons, faites alors <code>$buttons.find( "a.mybutton" )</code> pour trouver les éléments
		a plutôt que <code>$( "a.mybutton" )</code>. Lorsque possible, utilisez du JavaScript natif pour rechercher
		tel que <code>getElementById</code> et <code>getElementsByTagName</code>.</li>
		<li><strong>Recherches DOM optimisées tout d'abord, filtrage ensuite:</strong> Les recherches DOM les plus rapides
		en JavaScript sont par id et nom de balise à cause des fonctions JavaScript natives <code>getElementById</code>
		et <code>getElementsByTagName</code>. Prenez avantage de cette performance en exécutant d'abord des recherches optimisées
		et filtrez ensuite. Par exemple, au lieu de <code>.find( "a[href=*'url_fragment']" )</code> effectuez <code>.find( "a" ).filter( "[href=*'url_fragment']" )</code>.</li>
		<li>
			<strong>Combiner de multiples événements à un élément :</strong> Lorsque vous combinez de multiples événements à un élément,
			il est plus rapide de combiner tous les événements a un seul gestionnaire d'événement.
			Vous pouvez utiliser la propriété type de l'événement pour déterminer quel événement a été activé
			(see the jsPerf <a rel="external" href="https://jsperf.com/combined-or-separate-event-handlers" lang="en">handling multiple events test case</a>).
<pre><code>// Plus rapide : un seul gestionnaire d'événement pour les deux événements
$( "#elem" ).on( "mouseover mouseout", function( event ) {
	if ( event.type === "mouseover" ) {

		// mouseover
	} else {

		// mouseout
	}
});

// Plus lent: séparer le gestionnaire d'événement pour chaque événement
var $elem = $( "#elem" );
$elem.on( "mouseover", function( event ) {

	// mouseover
});
$elem.on( "mouseout", function( event ) {

	// mouseout
});</code></pre>
		</li>
	</ul>

	<section>
		<h3>Tester vos optimisations</h3>
		<p>Pour tester vos changements à l'optimisation, enveloppez un bloc de code avec les deux lignes de code suivantes.</p>
		<pre><code>var test = ( new Date() ).getTime();
// Code à tester
console.log( ( new Date() ).getTime() - test );</code></pre>
		<p>Un autre option est d'utiliser un site tel que <a rel="external" href="https://jsperf.com/">jsPerf</a> pour mesurer différents morceaux de code JavaScript.</p>
	</section>

	<section>
		<h3>Scénarios d'essai jsPerf</h3>
		<ul lang="en">
			<li><a rel="external" href="https://jsperf.com/combined-or-separate-event-handlers/3">Combined vs. Separate Event Binding</a></li>
			<li><a rel="external" href="https://jsperf.com/program-flow-statements">if/else versus switch statements</a></li>
			<li><a rel="external" href="https://jsperf.com/jep-vs-direct-binding">jQuery Event Binding: Document vs. Element</a></li>
			<li><a rel="external" href="https://jsperf.com/jquery-mobile-panel-popup">jQuery Mobile Panel vs. Popup Open</a></li>
		</ul>
	</section>

	<section>
		<h3>Techniques additionnelles</h3>
		<ul>
			<li><a rel="external" href="https://24ways.org/2011/your-jquery-now-with-less-suck">Your jQuery: Now With 67% Less Suck</a></li>
			<li><a rel="external" href="https://hungred.com/useful-information/jquery-optimization-tips-and-tricks/">8 jQuery Optimization Tips and Tricks</a></li>
			<li><a rel="external" href="http://jonraasch.com/blog/10-advanced-jquery-performance-tuning-tips-from-paul-irish">10 Advanced jQuery Performance Tuning Tips from Paul Irish</a></li>
			<li><a rel="external" href="https://developers.google.com/speed/articles/optimizing-javascript">Optimizing JavaScript code</a></li>
			<li><a rel="external" href="https://desalasworks.com/javascript-performance-techniques/">25 Techniques for Javascript Performance</a></li>
			<li><a rel="external" href="http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas">10 Javascript Performance Boosting Tips from Nicholas Zakas</a></li>
			<li><a rel="external" href="https://oreilly.com/server-administration/excerpts/even-faster-websites/writing-efficient-javascript.html">Writing Efficient JavaScript: Chapter 7 - Even Faster Websites</a></li>
		</ul>
	</section>
</section>

<section>
	<h2>Optimisation de code CSS</h2>
	<ul>
		<li><strong>Minimiser les noms de classe CSS :</strong> les noms de classe CSS sont souvent réutilisées de
		multiple fois à l'intérieur des fichiers CSS et HTML pour pouvoir ajouter rapidement en vrac aux fichiers si ils sont longs are inutilement long.
		Gardez les noms de classe aussi courts que possible tout en s'assurant qu'ils restent unique.
		Un exercice de réduction des noms de classe d'un cadre de la BOEW récent a permis de réduire la taille de fichier de 		10% à 30%.</li>
	</ul>

	<section>
		<h3>Techniques additionnelles</h3>
		<ul lang="en">
			<li><a rel="external" href="https://www.queness.com/post/588/15-ways-to-optimize-css-and-reduce-css-file-size">15 Ways to Optimize CSS and Reduce CSS File Size</a></li>
			<li><a rel="external" href="https://web.archive.org/web/20190119144722/http://www.dailycoding.com/Posts/top_7_tip_for_optimizing_css.aspx">Top 7 Tip for Optimizing CSS</a></li>
			<li><a rel="external" href="https://perishablepress.com/how-to-micro-optimize-your-css/">How to Micro-Optimize Your CSS]</a></li>
		</ul>
	</section>
</section>

<section>
	<h2>Optimisation du code HTML</h2>
	<ul>
		<li><strong>Minimiser l'utilisation de commentaires HTML :</strong> chaque kilooctet compte lorsqu'il est question d'appareils mobiles, alors évitez de gonfler inutilement votre code avec des commentaires HTML. Gardez les commentaires à un strict minimum en éliminant les commentaires inutiles et réduisant le reste.</li>
		<li><strong>Retirer le code marquer en commentaire :</strong> Le code marquer en commentaire ne devrait pas être laissé dans les pages Web en production. Le code marqué en commentaire peut facilement ajouter plusieurs kilooctets inutiles aux téléchargements. Gardez le code inutilisé séparé des pages Web en production.</li>
		<li><strong>Utiliser la tabulation plutôt que la barre d'espacement pour espacer votre code :</strong> 		Il faut en général 5 caractères d'espacement pour égaler l'espacement d'une tabulation. 		Une réduction significative de taille de fichier peut être accomplie en utilisant la tabulation plutôt que la barre d'espacement. 		Plusieurs outils d'édition permettent de facilement passé à l'espacement par tabulation.</li>
		<li><strong>Minimiser l'espacement:</strong> L'espacement est pratique pour la clarté du code 		mais peut rapidement ajouter à la taille du fichier HTML. Trouvez un bon équilibre entre la clarté de code 		et la taille de fichier pour minimiser l'impact sur l'utilisateur final.</li>
		<li><strong>Retirer l'attribut <code>type</code> des éléments <code>script</code> :</strong> En HTML5, <code>type="text/javascript"</code> n'est plus requis sur les éléments <code>script</code>. Utilisez l'attribut <code>type</code> seulement sur les éléments <code>script</code> pour les scénarios non-JavaScript.</li>
		<li><strong>Retirer l'attribut <code>type</code> des éléments <code>style</code> :</strong> En HTML5, <code>type="text/css"</code> n'est plus requis sur les éléments <code>style</code>. Utilisez seulement l'attribut <code>type</code> sur les éléments <code>style</code> pour des scénarios non-CSS.</li>
	</ul>
</section>

<section>
	<h2>Optimisation de serveur Web</h2>
	<ul>
		<li>Autoriser la compression Gzip sur votre serveur Web. La compression Gzip peut réduire la taille de transfert
		jusqu'à 70%. ''Note :''' La compression Gzip ne réduit pas l'impact sur la taille de la mémoire tampon de l'utilisateur final (mémoire tampon non-comprimée) alors la taille des fichiers devrait être réduite autant que possible avant la compression Gzip.</li>
	</ul>
</section>
